<template>
	<view class="quotation-fields">
		<uni-list :border="true">
			<template v-for="item in form">
				<uni-list-item :style="{width: halfs.includes(item.field_name) ? '50%' : '100%', order: item.sequence}"
					v-if="!(is_customer && customer_outs.includes(item.field_name)) && !(item.field_name === 'rebate_range' && !isComputed)"
					:key="item.field_name" v-show="!['x_gold_silver'].includes(item.field_name)">
					<template v-slot:header>
						<text class="label" :class="
							{
								labelRequired: labelRequireds.includes(item.field_name) && item.do_type === 'edit',
								labelOptional: labelOptionals.includes(item.field_name)	&& item.do_type === 'edit',
								labelHalf: halfs.includes(item.field_name)
							}">
							{{item.name}}:
						</text>
					</template>
					<template v-slot:body>
						<view class="sign-row">
							<template v-if="item.do_type === 'edit'">
								<!-- 浮点数类型 -->
								<template v-if="item.field_type_origin === 'float'">
									<!-- 手提宽特殊处理 -->
									<picker v-if="item.field_name === 'portable_width'" mode="selector" :range="options.portable_width"
										@change="(e) => {portable_width_picker(e,item)}" @click="pickerClick">
										<!-- <input type="text" class="input" :placeholder="'请选择' + item.name" placeholder-class="placeholder"
											:always-embed="true" v-model="item.value" /> -->
										<text v-if="item.value">{{item.value}}</text>
										<text class="placeholder" v-else>请选择{{item.name}}</text>
									</picker>
									<input type="text" class="input" :placeholder="'请输入' + item.name" placeholder-class="placeholder"
										:always-embed="true" v-model="item.value" v-else-if="item.field_name === 'x_gold_silver'"
										disabled />
									<input type="text" class="input" :placeholder="'请输入' + item.name" placeholder-class="placeholder"
										:always-embed="true" v-model="item.value" v-else />
								</template>
								<!-- 整数类型 -->
								<template v-if="item.field_type_origin === 'integer'">
									<!-- 让利幅度特殊处理 -->
									<div v-if="item.field_name === 'rebate_range'">
										<l-number-input v-model="item.value" @change="(e) => rebate_range_change(e,item)"></l-number-input>
									</div>
									<input type="text" class="input" :placeholder="'请输入' + item.name" placeholder-class="placeholder"
										:always-embed="true" v-model="item.value" v-else />
								</template>
								<!-- 文字类型 -->
								<template v-if="item.field_type_origin === 'text'">
									<input type="text" class="input" :placeholder="'请输入' + item.name" placeholder-class="placeholder"
										:always-embed="true" v-model="item.value" />
								</template>
								<!-- 选择类型,此时各字段特殊处理 -->
								<template v-if="item.field_type_origin === 'selection'">
									<picker v-if="item.field_name === 'fuheliao_type'" mode="selector" :range="options.fuheliao_type"
										@change="(e) => {fuheliao_type_picker(e,item)}" @click="pickerClick">
										<!-- <input type="text" class="input" :placeholder="'请选择' + item.name" placeholder-class="placeholder"
											:always-embed="true" v-model="item.value" /> -->
										<text v-if="item.value">{{item.value}}</text>
										<text class="placeholder" v-else>请选择{{item.name}}</text>
									</picker>
									<picker v-if="item.field_name === 'backing_type_select'" mode="selector"
										:range="options.backing_type_select" @change="(e) => {backing_type_select_picker(e,item)}"
										@click="pickerClick">
										<!-- <input type="text" class="input" :placeholder="'请选择' + item.name" placeholder-class="placeholder"
											:always-embed="true" v-model="item.value" /> -->
										<text v-if="item.value">{{item.value}}</text>
										<text class="placeholder" v-else>请选择{{item.name}}</text>
									</picker>
									<picker v-if="item.field_name === 'trim'" mode="selector" :range="options.trim"
										@change="(e) => {trim_picker(e,item)}" @click="pickerClick">
										<!-- <input type="text" class="input" :placeholder="'请选择' + item.name" placeholder-class="placeholder"
											:always-embed="true" v-model="item.value" /> -->
										<text v-if="item.value">{{item.value}}</text>
										<text class="placeholder" v-else>请选择{{item.name}}</text>
									</picker>
									<picker v-if="item.field_name === 'print_type'" mode="selector" :range="options.print_type"
										@change="(e) => {print_type_picker(e,item)}" @click="pickerClick">
										<!-- <input type="text" class="input" :placeholder="'请选择' + item.name" placeholder-class="placeholder"
											:always-embed="true" v-model="item.value" /> -->
										<text v-if="item.value">{{item.value}}</text>
										<text class="placeholder" v-else>请选择{{item.name}}</text>
									</picker>
									<picker v-if="item.field_name === 'jinyin_type'" mode="selector"
										:range="options.jinyin_type.map(x => x.label)" @change="(e) => {jinyin_type_picker(e,item)}"
										@click="pickerClick">
										<!-- <input type="text" class="input" :placeholder="'请选择' + item.name" placeholder-class="placeholder"
											:always-embed="true" v-model="item.value" /> -->
										<text v-if="item.value">{{item.value}}</text>
										<text class="placeholder" v-else>请选择{{item.name}}</text>
									</picker>
								</template>
							</template>
							<template v-else-if="item.do_type === 'readonly'">
								<div :class="item.show_type === 'signImport' && 'signYellow'">
									<text v-if="isToFixed3(item)">
										{{item.value.toFixed(3)}}
									</text>
									<text v-else-if="isToFixed2(item)">
										{{item.value.toFixed(2)}}
									</text>
									<text v-else-if="isToFixed1(item)">
										{{item.value.toFixed(1)}}
									</text>
									<text v-else-if="isToFixed0(item)">
										{{item.value.toFixed(0)}}
									</text>
									<template v-else-if="item.field_name === 'sale_state'">
										<text
											:class="{qualified: item.value === '合格', unqualified: item.value === '不合格'}">{{item.value}}</text>
									</template>
									<text v-else>{{getValue(item.value)}}</text>
								</div>
							</template>
						</view>
					</template>
				</uni-list-item>
			</template>
		</uni-list>
	</view>
</template>

<script>
	import _ from "lodash";
	import {
		readonly
	} from "vue";
	export default {
		props: {
			fields: {
				type: Array,
				default: () => {
					return [];
				},
			},
			fields_default: {
				type: Object,
				default: () => {
					return {};
				},
			},
			is_customer: {
				type: Boolean,
				default: () => {
					return false;
				},
			},
			isComputed: {
				type: Boolean,
				default: () => {
					return true;
				},
			},
			isPreview: {
				type: Boolean,
				default: () => {
					return true;
				},
			},
			is_customized: {
				type: Boolean,
				default: () => {
					return false;
				},
			},
		},
		data() {
			return {
				halfs: [
					'front_width',
					'height',
					'portable_width',
					'side_width',
					'portable_length',
					'portable_grammage',
					'x_velcro_cost',
					'x_buckle_cost',
					'product_grammage',
					'non_woven_bag_grammage',
				],
				labelRequireds: [
					'front_width',
					'height',
					'side_width',
					'packing_cost',
					'quantity',
					'color_quantity',
					'trim',
				],
				labelOptionals: [
					'other_expenses',
					'jinyin_type',
				],
				form: [],
				show_form: [],
				options: {
					fuheliao_type: ['丙料', '乙料'],
					trim: ['修边', '不修边'],
					backing_type_select: ['亚光膜', 'OPP'],
					portable_width: ['5', '6'],
					jinyin_type: [{
							label: '无',
							value: 0
						},
						{
							label: '金色',
							value: 0.03
						},
						{
							label: '银色',
							value: 0.03
						}
					],
					print_type: ['双面不一样', '单面', '双面一样'],
				},
				customer_outs: [
					'x_edge_grammage',
					'non_woven_cost',
					'x_shoutidcgz',
					'packing_cost',
					'x_carton',
					'x_gold_silver',
					'rebate_range',
					'sale_state',
				],
			}
		},
		watch: {
			isPreview: {
				handler(nv) {
					this.show_form = this.form?.filter?.(x => !(this.is_customer && this.customer_outs.includes(x.field_name)))
						.filter?.(x => !(x.field_name === 'rebate_range' && !this.isPreview)) || [];
					this.$nextTick(() => {
						this.$emit('loaded', this.show_form);
					})
				},
				immediate: false,
				deep: true,
			},
			fields: {
				handler(nv) {
					nv.forEach(x => {
						if (x.value !== undefined && x.value !== null && x.value !== '') {
							x.value = x.value;
						} else if (this.fields_default?.[x.field_name]) {
							x.value = this.fields_default?.[x.field_name];
						} else {
							x.value = '';
						}
						if (!this.form.map(y => y.field_name).includes(x.field_name)) {
							this.form.push(x);
						} else {
							if (x.do_type === 'readonly') {
								let idx = this.form.findIndex(y => y.field_name === x.field_name);
								this.form[idx].value = x.value;
							}
						}
					})
					this.show_form = this.form?.filter?.(x => !(this.is_customer && this.customer_outs.includes(x.field_name)))
						.filter?.(x => !(x.field_name === 'rebate_range' && !this.isPreview)) || [];
					this.$nextTick(() => {
						this.$emit('loaded', this.show_form);
					})
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			fuheliao_type_picker(e, item) {
				item.value = this.options.fuheliao_type[Number(e.detail.value)];
				this.$forceUpdate();
			},
			trim_picker(e, item) {
				item.value = this.options.trim[Number(e.detail.value)];
				this.$forceUpdate();
			},
			backing_type_select_picker(e, item) {
				item.value = this.options.backing_type_select[Number(e.detail.value)];
				this.$forceUpdate();
			},
			portable_width_picker(e, item) {
				item.value = this.options.portable_width[Number(e.detail.value)];
				this.$forceUpdate();
			},
			jinyin_type_picker(e, item) {
				item.value = this.options.jinyin_type[Number(e.detail.value)].label;
				const x_gold_silver_idx = this.form.findIndex(x => x.field_name === 'x_gold_silver');
				this.form[x_gold_silver_idx].value = this.options.jinyin_type[Number(e.detail.value)].value;
				this.$forceUpdate();
			},
			print_type_picker(e, item) {
				item.value = this.options.print_type[Number(e.detail.value)];
				this.$forceUpdate();
			},
			pickerClick() {
				uni.hideKeyboard();
			},
			// 获取表单
			getForm() {
				let form = _.cloneDeep(this.form);
				// 数字类型处理
				form = form.map(x => {
					switch (x.field_type_origin) {
						case 'float':
						case 'integer':
							if (x.value !== '' && x.value !== undefined && x.value !== null) {
								x.value = Number(x.value);
							}
							break;
					}
					return x;
				})
				return form;
			},
			getValue(e) {
				return typeof e === 'boolean' ? '' : e;
			},
			rebate_range_change(e, item) {
				let idx = this.form.findIndex(x => x.field_name === 'rebate_range');
				this.form[idx].value = e;
			},
			isToFixed0(item) {
				return ['plate_cost', 'quantity', 'amount_without_tax', 'amount', 'sale_amount', 'final_sale_price'].includes(
					item.field_name);
			},
			isToFixed1(item) {
				return ['non_woven_bag_grammage'].includes(item.field_name);
			},
			isToFixed2(item) {
				const condition1 = ['x_velcro_cost', 'x_buckle_cost', 'price_with_freight', 'price_without_freight'].includes(
					item.field_name);
				const condition2 = ['lowest_quotation_with_freight', 'lowest_quotation_without_freight'].includes(item
					.field_name) && !this.is_customized;
				return condition1 || condition2;
			},
			isToFixed3(item) {
				const condition1 = ['lowest_quotation_with_freight', 'lowest_quotation_without_freight'].includes(item
					.field_name) && this.is_customized;
				return condition1;
			},
		},
	}
</script>
<style lang="scss" scoped>
	.quotation-fields {
		.label {
			font-size: 32rpx !important;
			color: black !important;
			flex-shrink: 0;
			line-height: 48rpx;

			&.labelHalf {
				max-width: 8em;
			}

			display: flex;

			&.labelRequired::after {
				content: '必填';
				font-size: 20rpx;
				color: red;
				line-height: 48rpx;
			}

			&.labelOptional::after {
				content: '选填';
				font-size: 20rpx;
				line-height: 48rpx;
			}
		}

		.sign-row {
			flex: 1;
			padding-left: 10rpx;
			display: flex;
			justify-content: flex-end;
			font-size: 32rpx !important;
			line-height: 48rpx;

			.showText {
				width: 100%;
				text-align: right;
				line-height: 1.2;
				word-break: break-all;
			}

			.input {
				width: 100%;
				height: 48rpx;
				line-height: 48rpx;
				text-align: right;
			}

			.signYellow {
				padding: 0 10rpx;
				background-color: yellow;
			}

			text {
				text-align: right;
				word-break: break-all;

				&.qualified {
					color: rgb(7, 193, 96);
				}

				&.unqualified {
					color: red;
				}
			}
		}

		/deep/.placeholder {
			color: #bdbdbd;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>